<?php

use yii\helpers\Url;
use common\models\IndexImg;
?>
<link rel="stylesheet" href="/assets/css/main.css?2.0">
<link rel="stylesheet" href="/assets/css/index.css?2.0">

<script>
    
    $(function(){
        
        $('.con-2').click(function(){

            $('#as').show();
            $("video").attr('id','aaaa');
            fullScreen();
            playVid();
        });
        
        window.onresize = function() {
            if (!checkFull()) {
                //要执行的动作
//                $("#dashboard_id").removeClass('expand').addClass('contract');//这里捡个懒，直接用JQ来改className

                pauseVid();
            }
        }
        function checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
            //to fix : false || undefined == undefined
            if (isFull === undefined) {isFull = false;}
            return isFull;
        }


        function playVid(){ 
            var x = document.getElementById("aaaa");

                x.play(); 
        } 
        function pauseVid(){ 
            var x = document.getElementById("aaaa");
                x.pause();
            $('#as').hide();
        } 

        function fullScreen() {
            var el = document.getElementById("aaaa");
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
            console.log(rfs)
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {

                // for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    });
    
    
    
</script>
<div class="banner" >
    <div class="slider " style="">
        <?php
            $banner = common\models\Banner::getBannerList();
            if($banner){
                foreach ($banner as $value) {
        ?>
        
        <div class="banner-intr clearfix" style="background: url(<?=IMAGE_URL.$value['img_url']?>) no-repeat center center;">
            
                <div class="intr-o">
                    <font class="f-1"><?=$value['title']?><br><span></span></font>
                </div>
                <div class="intr-t">
                    <font class="f-2"><?=$value['des']?></font>
                </div>
                <div class="intr-th" style="margin-top: 70px">
                    <a href="<?=$value['link']?>">了解详情</a>
                </div>
            
        </div>
        <?php }} else{ ?>
        <div class="banner-intr clearfix">
            <div class="intr-o">
                <font class="f-1">静音集尘&nbsp;&nbsp;&nbsp;&nbsp;纯净舒适<br>享受生产与创造的乐趣<br><span></span></font>
            </div>
            <div class="intr-t">
                <font class="f-2">全球首发气陀螺尘气分离技术 <br>二十项国内国际专利保护</font>
            </div>
            <div class="intr-th">
                <a href="#">了解详情</a>
            </div>
        </div>
        <div class="banner-intr clearfix">
            <div class="intr-o">
                <font class="f-1">静音集尘&nbsp;&nbsp;&nbsp;&nbsp;纯净舒适<br>享受生产与创造的乐趣<br><span></span></font>
            </div>
            <div class="intr-t">
                <font class="f-2">全球首发气陀螺尘气分离技术 <br>二十项国内国际专利保护</font>
            </div>
            <div class="intr-th">
                <a href="#">了解详情11</a>
            </div>
        </div>
        <div class="banner-intr clearfix">
            <div class="intr-o">
                <font class="f-1">静音集尘&nbsp;&nbsp;&nbsp;&nbsp;纯净舒适<br>享受生产与创造的乐趣<br><span></span></font>
            </div>
            <div class="intr-t">
                <font class="f-2">全球首发气陀螺尘气分离技术 <br>二十项国内国际专利保护</font>
            </div>
            <div class="intr-th">
                <a href="#">了解详情22</a>
            </div>
        </div>
        <div class="banner-intr clearfix">
            <div class="intr-o">
                <font class="f-1">静音集尘&nbsp;&nbsp;&nbsp;&nbsp;纯净舒适<br>享受生产与创造的乐趣<br><span></span></font>
            </div>
            <div class="intr-t">
                <font class="f-2">全球首发气陀螺尘气分离技术 <br>二十项国内国际专利保护</font>
            </div>
            <div class="intr-th">
                <a href="#">了解详情33</a>
            </div>
        </div>
        <?php }?>
        <div class="slider-bot" >
            <a href="#bottom-1" style="display: inline-block;height: 100%;width: 100%;"></a>
        </div>
    </div>
    <div class="banner-bot">
        <div class="banner-bot-l b-blue left"></div>
<!--        <div class="banner-bot-r left"></div>-->
    </div>
</div>

<div class="con-1 clearfix"><a id="bottom-1"></a>
    <ul>
        <li>
            <div class="li-t"><img src="/assets/img/li-t-1.png"></div>
            <div class="li-b"><font class="f-3">气陀螺尘气分离技术</font></div>
        </li>
        <li>
            <div class="li-t"><img src="/assets/img/li-t-2.png"></div>
            <div class="li-b"><font class="f-3">工业集尘解决方案</font></div>
        </li>
        <li>
            <div class="li-t"><img src="/assets/img/li-t-3.png"></div>
            <div class="li-b"><font class="f-3">保障用户清洁生产</font></div>
        </li>
        <li class="b-none">
            <div class="li-t"><img src="/assets/img/li-t-4.png"></div>
            <div class="li-b"><font class="f-3">全智能控制</font></div>
        </li>
    </ul>
</div>


<div class="con-6 clearfix">
    <div class="con-6-ul" style="max-width: 1200px">
        <ul>
            <?php
            if($pro_list){
                    foreach ($pro_list as $value) {

            ?>
            <li class="act-2">
                <div class="ul-i left">
                    <img src="<?=IMAGE_URL.$value['img_url']?>">
                </div>
                <div class="ul-intro left">
                    <font class="m-1"><?=$value['pro_name']?></font><br>
                    <font class="m-2"><?=$value['pro_intro']?></font>
                </div>
            </li>
            <?php }} else{?>
            <li>
                <div class="ul-i left">
                    <img src="/assets/img/ul-i-2.png">
                </div>
                <div class="ul-intro left">
                    <font class="m-1">G-800</font><br>
                    <font class="m-2">industrial dust processor</font>
                </div>
            </li>
            <li>
                <div class="ul-i left">
                    <img src="/assets/img/ul-i-2.png">
                </div>
                <div class="ul-intro left">
                    <font class="m-1">G-800</font><br>
                    <font class="m-2">industrial dust processor</font>
                </div>
            </li>
             <li>
                <div class="ul-i left">
                    <img src="/assets/img/ul-i-3.png">
                </div>
                <div class="ul-intro left">
                    <font class="m-1">G-1000</font><br>
                    <font class="m-2">industrial dust processor</font>
               </div>
            </li>
            <?php }?>
        </ul>
    </div>
    <div class="con-c">
        <?php
            if($pro_list){
                foreach ($pro_list as $value) {

        ?>
        <div class="con-cs">
            <div class="con-intr">
                <font class="f-5"><?= $value['pro_exp']?></font><br>
                <font class="f-6"><?=$value['pro_name'];?>&nbsp;&nbsp;&nbsp;&nbsp;<?=$value['pro_intro'];?></font>
                <h3 class="con-gg">规格参数</h3>
            </div>
            <div class="con-img">
                <div class="con-img-v"><?= $value['pro_img']?></div>
                <div class="con-img-h hidden"><?= $value['pro_cs_img']?></div>
            </div>
        </div>
        
        <?php }} else {?>
        
        <div class="con-cs">
            <div class="con-intr">
                <font class="f-5">GYRO AIR 气陀螺™工业集尘器 </font><br>
                <font class="f-6">G-1000 industrial dust processor</font>
                <h3 class="con-gg">规格参数</h3>
            </div>
            <div class="con-img">
                <div class="con-img-v"><img src="/assets/img/con-img-1.png"></div>
                <div class="con-img-h hidden"><img src="/assets/img/con-img-1.png"></div>
            </div>
        </div>
        <div class="con-cs">
            <div class="con-intr">
                <font class="f-5">GYRO AIR 气陀螺™工业集尘器 </font><br>
                <font class="f-6">G-1000 industrial dust processor</font>
                <h3 class="con-gg">规格参数</h3>
            </div>
            <div class="con-img">
                <div class="con-img-v"><img src="/assets/img/con-img-1.png"></div>
                <div class="con-img-h hidden"><img src="/assets/img/con-img-1.png"></div>
            </div>
        </div>
        <div class="con-cs">
            <div class="con-intr">
                <font class="f-5">GYRO AIR 气陀螺™工业集尘器 </font><br>
                <font class="f-6">G-1000 industrial dust processor</font>
                <h3 class="con-gg">规格参数</h3>
            </div>
            <div class="con-img">
                <div class="con-img-v"><img src="/assets/img/con-img-1.png"></div>
                <div class="con-img-h hidden"><img src="/assets/img/con-img-1.png"></div>
            </div>
        </div>
        <?php }?>
    </div>
</div>


<div class="con-3">
    <div class="con-3-intr">
        <font class="f-5">清新安静，见证工业之美</font><br>
        <font class="f-6">由于突破性的气陀螺技术和无与伦比的性能，GYRO AIR<br>气陀螺™工业集尘器重新定义了工业集尘标准，给加工业从业者带来了福音</font>
    </div>
</div>

<div class="con-4 clearfix">
    <div class="con-l left">
        <div class="con-c-l">
            <ul>
                <li class="c4-l-r"><img src="/assets/img/con-r.png"></li>
                <li id="l-num" data="0">0<span id="c4-num" data="<?=  count($pages)?>">1</span>&nbsp;/&nbsp;0<?=  count($pages)?></li>
                <li class="c4-l-l"><img src="/assets/img/lang-t.png"></li>
            </ul>
        </div>
    </div>
    <style>

        div::-webkit-scrollbar{
            display: none;
        }

    </style>
    <div class="con-c-r">
        <?php
        if($pages){
            foreach ($pages as $v) {
                ?>
                <div class="con-r right con-4-r">
                    <div class="con-r-l left">
                        <div class="r-l-t c_video" page="<?=$v?>" data="1" style="position: relative;overflow: hidden">
                            <div style="height: 100%;width: 100%;position: absolute;left: 0;top:0;background: rgba(25,31,35,0.9);color: #fff;word-wrap:break-word;overflow-y: scroll;">
                                <div style="padding: 43px">
                                    <span id="cate" style="color: #81d021;"><?=IndexImg::getCate($v,1)?></span>/<span id="date"><?=IndexImg::getDate($v,1)?></span>
                                    <h4 style="font-weight: 900" id="title"><?=IndexImg::getVideoName($v,1)?></h4>
                                    <div style="line-height: 25px" id="desc"><?=IndexImg::getVideo($v,1)?></div>
                                </div>
                            </div>
                            <img data-cate="<?=IndexImg::getCate($v,1)?>" data-date="<?=IndexImg::getDate($v,1)?>" data-desc="<?=IndexImg::getVideo($v,1)?>" data-title="<?=IndexImg::getVideoName($v,1)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,1);?>">

                        </div>
                        <div class="r-l-b">
                            <div class="l-b-l left  c_video" page="<?=$v?>" data="2" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,2)?>" data-date="<?=IndexImg::getDate($v,2)?>"  data-desc="<?=IndexImg::getVideo($v,2)?>" data-title="<?=IndexImg::getVideoName($v,2)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,2);?>">

                            </div>
                            <div class="l-b-r right  c_video" page="<?=$v?>" data="3" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,3)?>" data-date="<?=IndexImg::getDate($v,3)?>"  data-desc="<?=IndexImg::getVideo($v,3)?>" data-title="<?=IndexImg::getVideoName($v,3)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,3);?>">
                            </div>
                        </div>
                    </div>
                    <div class="con-r-r left">
                        <ul>
                            <li class="c_video" page="<?=$v?>" data="4" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,4)?>" data-date="<?=IndexImg::getDate($v,4)?>"  data-desc="<?=IndexImg::getVideo($v,4)?>" data-title="<?=IndexImg::getVideoName($v,4)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,4);?>">

                            </li>
                            <li class="c_video" page="<?=$v?>" data="5" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,5)?>" data-date="<?=IndexImg::getDate($v,5)?>"  data-desc="<?=IndexImg::getVideo($v,5)?>" data-title="<?=IndexImg::getVideoName($v,5)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,5);?>">

                            </li>
                            <li class="c_video" page="<?=$v?>" data="6" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,6)?>" data-date="<?=IndexImg::getDate($v,6)?>"  data-desc="<?=IndexImg::getVideo($v,6)?>" data-title="<?=IndexImg::getVideoName($v,6)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,6);?>">

                            </li>
                            <li class="c_video" page="<?=$v?>" data="7" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,7)?>" data-date="<?=IndexImg::getDate($v,7)?>"  data-desc="<?=IndexImg::getVideo($v,7)?>" data-title="<?=IndexImg::getVideoName($v,7)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,7);?>">

                            </li>
                            <li class="c_video" page="<?=$v?>" data="8" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,8)?>" data-date="<?=IndexImg::getDate($v,8)?>"  data-desc="<?=IndexImg::getVideo($v,8)?>" data-title="<?=IndexImg::getVideoName($v,8)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,8);?>">

                            </li>
                            <li class="c_video" page="<?=$v?>" data="9" style="position: relative;">

                                <img data-cate="<?=IndexImg::getCate($v,9)?>" data-date="<?=IndexImg::getDate($v,9)?>"  data-desc="<?=IndexImg::getVideo($v,9)?>" data-title="<?=IndexImg::getVideoName($v,9)?>" src="<?= IMAGE_URL.IndexImg::getVideoAddr($v,9);?>">

                            </li>
                        </ul>
                    </div>

                </div>
            <?php }}else { ?>
            <div class="con-r right con-4-r">
                <div class="con-r-l left">
                    <div class="r-l-t"><img src="/assets/img/r-l-t.png"></div>
                    <div class="r-l-b">
                        <div class="l-b-l left"><img src="/assets/img/l-b-l.png"></div>
                        <div class="l-b-r right"><img src="/assets/img/l-b-r.png"></div>
                    </div>
                </div>
                <div class="con-r-r left">
                    <ul>
                        <li><img src="/assets/img/r-r-1.png"></li>
                        <li><img src="/assets/img/r-r-2.png"></li>
                        <li><img src="/assets/img/r-r-3.png"></li>
                        <li><img src="/assets/img/r-r-4.png"></li>
                        <li><img src="/assets/img/r-r-5.png"></li>
                        <li><img src="/assets/img/r-r-6.png"></li>
                    </ul>
                </div>
            </div>
            <div class="con-r right con-4-r">
                <div class="con-r-l left">
                    <div class="r-l-t"><img src="/assets/img/r-l-t.png"></div>
                    <div class="r-l-b">
                        <div class="l-b-l left"><img src="/assets/img/l-b-l.png"></div>
                        <div class="l-b-r right"><img src="/assets/img/l-b-r.png"></div>
                    </div>
                </div>
                <div class="con-r-r left">
                    <ul>
                        <li><img src="/assets/img/r-r-1.png"></li>
                        <li><img src="/assets/img/r-r-2.png"></li>
                        <li><img src="/assets/img/r-r-3.png"></li>
                        <li><img src="/assets/img/r-r-4.png"></li>
                        <li><img src="/assets/img/r-r-5.png"></li>
                        <li><img src="/assets/img/r-r-6.png"></li>
                    </ul>
                </div>
            </div>
            <div class="con-r right con-4-r">
                <div class="con-r-l left">
                    <div class="r-l-t"><img src="/assets/img/r-l-t.png"></div>
                    <div class="r-l-b">
                        <div class="l-b-l left"><img src="/assets/img/l-b-l.png"></div>
                        <div class="l-b-r right"><img src="/assets/img/l-b-r.png"></div>
                    </div>
                </div>
                <div class="con-r-r left">
                    <ul>
                        <li><img src="/assets/img/r-r-1.png"></li>
                        <li><img src="/assets/img/r-r-2.png"></li>
                        <li><img src="/assets/img/r-r-3.png"></li>
                        <li><img src="/assets/img/r-r-4.png"></li>
                        <li><img src="/assets/img/r-r-5.png"></li>
                        <li><img src="/assets/img/r-r-6.png"></li>
                    </ul>
                </div>
            </div>
        <?php }?>
    </div>
</div>

<div class="con-5 clearfix">
    <div class="con-5-intr">
        <font class="f-5 con-b">清新安静，见证工业之美</font><br>
        <font class="f-6">由于突破性的气陀螺技术和无与伦比的性能，GYRO AIR<br>气陀螺™工业集尘器重新定义了工业集尘标准，给加工业从业者带来了福音</font>
    </div>
</div>
<div class="con-2">


</div>
<div id="as" style="display: none"><?php $d=\common\models\Videos::find()->where(['status'=>1,'ischeck'=>1])->orderBy('sort')->asArray()->one();echo $d['url_video']?></div>
<script>
    $(function(){
        $('.con-r .c_video').mouseover(function(){
            $('.mc_img').remove();
                var dom =" <div class='mc_img' style='height: 100%;width: 100%;position: absolute;left: 0;top:0;background: rgba(129,208,30,0.5);'></div>"
                var title =$(this).find('img').attr('data-title');
                var desc =$(this).find('img').attr('data-desc');
                var cate =$(this).find('img').attr('data-cate');
                var date = $(this).find('img').attr("data-date");
                var dd=$(this).attr("data");
                if(dd!=1){
                    $(this).append(dom);
                    $("#title").html(title);
                    $("#desc").html(desc);
                    $("#date").html(date);
                    $("#cate").html(cate);
                }


        });
        $('.con-r .c_video').mouseout(function(){

        });
        
        
        $('.con-c-r .video_pic').each(function(){
            var v_height = $(this).height();
            v_height = v_height-35;
            $(this).find('.video_pic_i').css('padding-top',v_height/2+'px');
        });
    });
</script>
